<div class="popover dropdown-menu datepicker" ng-class="'datepicker-mode-' + $mode" style="max-width: 320px;">
  <div class="arrow"></div>
  <div class="popover-header">
    <span translate="TASK.TITLE.SELECT-DATE"></span>
    <div class="actions">
      <a ng-click="closeDatePopup(field); $hide()">{{ 'GENERAL.ACTION.CLOSE' | translate }}</a>
    </div>
  </div>
  <div class="popover-content">
    <div class="center">
      <div class="btn-group span">
        <button
          class="btn btn-xs"
          ng-click="clearDate(field, $select); $hide()"
          translate="TASK.ACTION.CLEAR-DATE"
        ></button>
        <button
          class="btn btn-xs"
          ng-click="selectToday(field, $select); $hide()"
          translate="TASK.ACTION.DATE-TODAY"
        ></button>
      </div>
    </div>
    <div class="section">
      <table style="table-layout: fixed; height: 100%; width: 100%;">
        <thead>
          <tr class="text-center">
            <th>
              <button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$selectPane(-1)">
                <i class="{{ $iconLeft }}"></i>
              </button>
            </th>
            <th colspan="{{ rows[0].length - 2 }}">
              <button
                tabindex="-1"
                type="button"
                class="btn btn-default btn-block text-strong"
                ng-click="$toggleMode()"
              >
                <strong style="text-transform: capitalize;" ng-bind="title"></strong>
              </button>
            </th>
            <th>
              <button tabindex="-1" type="button" class="btn btn-default pull-right" ng-click="$selectPane(+1)">
                <i class="{{ $iconRight }}"></i>
              </button>
            </th>
          </tr>
          <tr ng-show="showLabels" ng-bind-html="labels"></tr>
        </thead>
        <tbody class="calendar-grid">
          <tr ng-repeat="(i, row) in rows" height="{{ 100 / rows.length }}%">
            <td class="text-center" ng-repeat="(j, el) in row">
              <button
                tabindex="-1"
                type="button"
                class="btn btn-default"
                style="width: 100%"
                ng-class="{'btn-primary': el.selected, 'btn-info btn-today': el.isToday && !el.selected}"
                ng-click="$select(el.date)"
                ng-disabled="el.disabled"
              >
                <span ng-class="{'text-muted': el.muted}" ng-bind="el.label"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
